<template>
	<el-row>
		<el-col :span="1.5" style='font-family: PingFangSC-Medium;font-size: 12px;color: #0F212E;line-height: 18px;'>
			{{checkboxs.name}}：
		</el-col>
		<el-col :span="1.5">
			<el-checkbox
				:indeterminate="checkboxs.isIndeterminate"
				v-model="checkboxs.checkAll"
				@change="handleCheckAllChange">全部</el-checkbox>
		</el-col>
		<el-col :span="20" style='text-align: left;'>
			<el-checkbox-group v-model="checkboxs.checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in checkboxs.cities" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
		</el-col>
	</el-row>
</template>

<script>
export default {
  props: ['checkboxData'],
  data () {
    return {
      checkboxs: this.checkboxData
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.checkboxs.checkedCities = val ? this.checkboxs.cities : []
      this.checkboxs.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkboxs.checkAll = checkedCount === this.checkboxs.cities.length
      this.checkboxs.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxs.cities.length
      this.$emit('handleClick', value)
    }
  }
}
</script>

<style  scoped="" type="text/css">
	.el-checkbox {
		margin-left: 0;
		margin-right: 30px;
		margin-bottom: 15px;
		margin-left: 0px !important;
	}
</style>
